<!--
  @Author cj
  @Date: 2021/01/22/ 15:04
-->
<template>
  <div>
    <div class="table-menu-left">
      <slot name="tableTopMenu"></slot>
    </div>
    <div class="table-menu-right">
      <el-tooltip content="列显隐" placement="top">
        <el-button class="sort-btn" circle @click="columnVisible=true"><i class="iconfont iconfunction-fill"></i></el-button>
      </el-tooltip>
    </div>
    <el-checkbox-group class="table-checkbox-group" v-model="checkList">
      <el-radio-group class="table-radio-group" v-model="radioRow">
        <el-table
          border
          size="mini"
          v-loading="loading"
          v-if="isShowTable"
          :data="data"
          :row-key="option.rowKey"
          :height="option.height"
          :max-height="option.maxHeight"
          :stripe="option.stripe"
          :show-header="option.showHeader===undefined?true:option.showHeader"
          :highlight-current-row="option.highlightRow"
          :row-style="option.rowStyle"
          :cell-class-name="option.cellClassName"
          :cell-style="option.cellStyle"
          :header-row-class-name="option.headerRowClassName"
          :header-row-style="option.headerRowStyle"
          :header-cell-class-name="option.headerCellClassName"
          :header-cell-style="option.headerCellStyle"
          :show-summary="option.showSummary"
          :sum-text="option.sumText"
          :row-class-name="tableRowClassName"
          :summary-method="summaryMethod"
          :span-method="spanMethod"
          @cell-mouse-enter="cellMouseEnter"
          @cell-mouse-leave="cellMouseLeave"
          @cell-click="cellClick"
          @cell-dblclick="cellDblclick"
          @row-click="rowClick"
          @row-contextmenu="rowContextmenu"
          @row-dblclick="rowDblclick"
          @header-click="headerClick"
          @header-contextmenu="headerContextmenu"
          style="width: 100%">
          <!-- 序号+复选 -->
          <el-table-column
            label="序号+复选"
            v-if="option.indexCheck"
            :fixed="option.indexCheckFixed"
            :width="option.indexCheckWidth">
            <!-- 全选 -->
            <template slot="header" slot-scope="scope">
              <label class="el-checkbox table-checked" :class="{'is-checked':checkAll}">
                <span class="el-checkbox__input" :class="{'is-checked':checkAll, 'is-indeterminate': checkIndeterminate}">
                  <span class="el-checkbox__inner" @click.stop="handleCheckAllChange(!checkAll)"></span>
                  <input type="checkbox" aria-hidden="true" class="el-checkbox__original">
                </span>
                <span class="el-checkbox__label"></span>
              </label>
            </template>
            <template slot-scope="scope">
              <div class="index-check-box">
                <el-checkbox class="table-checked" :label="scope.row[option.rowKey]" @change="handleCheckedChange(scope.row.checked, scope.row, scope.$index)"> </el-checkbox>
                <!-- 有分页时，序号显示 -->
                <span class="table-index" v-if="page">{{(page.current - 1)*page.size + scope.$index + 1}}</span>
                <!-- 无分页时，序号显示 -->
                <span class="table-index" v-else>{{scope.$index + 1}}</span>
              </div>
            </template>
          </el-table-column>
          <!-- 序号+单选 -->
          <el-table-column
            label="选择"
            v-else-if="option.indexRadio"
            :fixed="option.indexRadioFixed"
            :width="option.indexRadioWidth">
            <template slot-scope="scope">
              <div class="index-check-box">
                <el-radio class="table-checked" :label="scope.row[option.rowKey]" @change="handleRadioChange(scope.row, scope.$index)"> </el-radio>
                <!-- 有分页时，序号显示 -->
                <span class="table-index" v-if="page">{{(page.current - 1)*page.size + scope.$index + 1}}</span>
                <!-- 无分页时，序号显示 -->
                <span class="table-index" v-else>{{scope.$index + 1}}</span>
              </div>
            </template>
          </el-table-column>
          <!-- 序号 -->
          <el-table-column
            label="序号"
            v-else-if="option.index"
            :fixed="option.indexFixed"
            :width="option.indexWidth"
            type="index">
            <template slot-scope="scope">
              <!-- 有分页时，序号显示 -->
              <span v-if="page">{{(page.current - 1)*page.size + scope.$index + 1}}</span>
              <!-- 无分页时，序号显示 -->
              <span v-else>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <!-- 其他列 -->
          <template v-for="(col_1_item, index) in showColumnsList">
            <my-column v-if="col_1_item.children && col_1_item.children.length"
                       :multColumnsSlotCellName="multColumnsSlotCellName"
                       :key="col_1_item.id"
                       :coloumn-header="col_1_item"
                       @handleCommand="handleCommand">
              <!-- 自定义显示内容列 -->
              <div v-for="(slotName,index) in multColumnsSlotCellName"
                   :slot="slotName"
                   :key="index"
                   slot-scope="scope">
                <slot :name="slotName" :row="scope.row"></slot>
              </div>
            </my-column>
            <!-- 操作列/自定义列 -->
            <slot v-else-if="col_1_item.slot" :name="col_1_item.prop"></slot>
            <el-table-column v-else
                             :key="col_1_item.id"
                             :label="col_1_item.label"
                             :prop="col_1_item.prop"
                             :min-width="col_1_item.minWidth"
                             :width="col_1_item.width"
                             :fixed="col_1_item.fixed"
                             :formatter="col_1_item.formatter"
                             :show-overflow-tooltip="col_1_item.overflowTooltip===undefined?true:col_1_item.overflowTooltip"
                             :class-name="col_1_item.className"
                             :label-class-name="col_1_item.labelClassName"
                             header-align="left"
                             align="left">
              <!-- 表头 -->
              <template slot="header" slot-scope="scope">
                <slot v-if="col_1_item.slotColumnHeader" :name="col_1_item.slotColumnHeader"></slot>
                <template v-else-if="col_1_item.headerFilter">
                  <el-dropdown class="header-filter-dropdown" size="mini">
                    <span class="el-dropdown-link">
                      {{col_1_item.label}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        v-for="(item, filterIndex) in col_1_item.headerFilterList"
                        :key="filterIndex"
                        :command="item[col_1_item.headerFilterCommand]">
                        <div @click="handleCommand(col_1_item.prop, index,item)">
                          <i v-if="item.icon" class="iconfont" :class="item.icon"></i>{{item[col_1_item.headerFilterLabel]}}
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item
                        command="asc"
                        v-if="col_1_item.headerFilterSort"
                        :divided="col_1_item.headerFilterList && col_1_item.headerFilterList.length>0">
                        <div @click="handleCommand(col_1_item.prop, index, {command: 'asc'})">
                          <i class="iconfont iconpaixu1"></i>升序
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item
                        command="des"
                        v-if="col_1_item.headerFilterSort">
                        <div @click="handleCommand(col_1_item.prop, index, {command: 'des'})">
                          <i class="iconfont iconpaixu2"></i>降序
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item
                        command="lock"
                        v-if="col_1_item.headerFilterLock && !col_1_item.fixed"
                        divided>
                        <div @click="handleCommand(col_1_item.prop, index, {command: 'lock'})">
                          <i class="iconfont icon-lock"></i>锁定此列
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item
                        command="lock"
                        v-if="col_1_item.headerFilterLock && col_1_item.fixed"
                        divided>
                        <div @click="handleCommand(col_1_item.prop, index, {command: 'unLock'})">
                          <i class="iconfont icon-unlock"></i>取消锁定
                        </div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
                <template v-else>{{col_1_item.label}}</template>
              </template>
              <!-- 表体内容显示 -->
              <template slot-scope="scope">
                <slot v-if="col_1_item.slotCell" :name="col_1_item.slotCell" :row="scope.row"></slot>
                <template v-else>
                  {{scope.row[col_1_item.prop]}}
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </el-radio-group>
    </el-checkbox-group>
    <div class="pagination-box">
      <!-- 是否调用分页 -->
      <el-pagination v-if="page && page.total>0" background
                     layout="total, sizes, prev, pager, next, jumper"
                     :page-size="page.size"
                     :current-page="page.current"
                     :total="1000"
                     :page-sizes="[100, 200, 300, 400]"
                     @size-change="sizeChange"
                     @current-change="currentChange">
      </el-pagination>
    </div>

    <!-- 显示/隐藏列 -->
    <column-transfer
      :visible="columnVisible"
      :dataList="columns"
      :choseDataList="showColumnsList"
      @close="transferClose"
    ></column-transfer>
  </div>
</template>

<script>
  import {deepClone} from "../../../util/util";
  import ColumnTransfer from './columnTransferMultHeader'
  import MyColumn from './MyColumn'

  export default {
    name: "indexMultHeader",
    components: {ColumnTransfer, MyColumn},
    props: {
      tableData: {
        type: Array,
        default: []
      },
      loading: {
        type: Boolean,
        default: false,
      },
      // 默认选中的复选值
      defaultCheckedList: {
        type: Array,
        default: ()=> []
      },
      option:{
        type: Object,
        default: ()=>{
          return {
            // 序号
            index:true,
            indexFixed: 'left',
            indexWidth: 50,
            // 序号+复选
            indexCheck:false,
            indexCheckFixed: 'left',
            indexCheckWidth: 50,
            // 序号+单选
            indexRadio:true,
            indexRadioFixed: 'left',
            indexRadioWidth: 50,
            // 复选/单选key值
            rowKey: 'id',
            // 高度
            height: 'auto',
            maxHeight: 'auto',
          }
        }
      },
      columns:{
        type: Array,
        default: []
      },
      page: {
        type: Object,
        default: null
      },
      // 多级表头需要自定义显示内容的列名称
      multColumnsSlotCellName:{
        type: Array,
        default: ()=> []
      },
    },
    data(){
      return {
        tableType: 1,
        isShowTable: true,
        data: this.tableData,
        // 复选
        checkAll: false,
        checkIndeterminate: false,
        checkList: this.defaultCheckedList,
        // 单选
        radioRow: '',
        // 表格列显隐（弹窗）操作
        columnVisible: false,
        showColumnsList: [],
      }
    },
    mounted(){
      // 回显选中数据
      if(this.defaultCheckedList.length>0){
        // 判断显示全选、半全选
        if(this.checkList.length===this.data.length){
          this.checkAll = true
          this.checkIndeterminate = false
        } else if(this.checkList.length===0){
          this.checkAll = false
          this.checkIndeterminate = false
        } else {
          this.checkAll = false
          this.checkIndeterminate = true
        }
      }
      // 显示列
      this.showColumnsList = deepClone(this.columns)
    },
    methods: {
      // 表头筛选
      handleCommand(columnName, columnIndex, data, isMultHeader){
        if(data.command==='lock' && !isMultHeader){
          this.showColumnsList[columnIndex].fixed=true
          for (let i = 0; i < this.columns.length; i++) {
            if(this.showColumnsList[columnIndex].prop === this.columns[i].prop){
              this.columns[i].fixed = true
              break
            }
          }
          // 重载表格
          this.isShowTable = false
          this.$nextTick(()=>{
            this.isShowTable = true
          })
          console.log( this.showColumnsList)
        } else if(data.command==='unLock' && !isMultHeader){
          this.showColumnsList[columnIndex].fixed = false
          for (let i = 0; i < this.columns.length; i++) {
            if(this.showColumnsList[columnIndex].prop === this.columns[i].prop){
              this.columns[i].fixed = false
              break
            }
          }
          // 重载表格
          this.isShowTable = false
          this.$nextTick(()=>{
            this.isShowTable = true
          })
        } else {
          this.$emit('handleColumnFilter', columnName, columnIndex, data)
        }
      },
      /** 复选 **/
      // 全选/取消全选-复选框
      handleCheckAllChange(val){
        this.checkList = []
        this.checkAll = val
        this.checkIndeterminate = false
        // 全选数据
        for (let i = 0, len = this.data.length; i < len; i++) {
          this.data[i].checked = val
          if(val){
            this.checkList.push(this.data[i][this.option.rowKey])
          }
        }
        this.data = deepClone(this.data)
        this.$emit('handleChecked', true, this.checkList, null, null)
      },
      // 复选框-选择
      handleCheckedChange(isChecked, row, index){
        // 判断显示全选、半全选
        if(this.checkList.length===this.data.length){
          this.checkAll = true
          this.checkIndeterminate = false
        } else if(this.checkList.length===0){
          this.checkAll = false
          this.checkIndeterminate = false
        } else {
          this.checkAll = false
          this.checkIndeterminate = true
        }
        this.$emit('handleChecked', false, this.checkList, row, index)
      },
      /** 单选 **/
      handleRadioChange(row,index){
        this.$emit('handleRadio', row, index)
      },

      // class
      tableRowClassName({row, rowIndex}){
        if(this.checkList.indexOf(row[this.option.rowKey])>-1 || this.radioRow===row[this.option.rowKey]){
          return 'table-row-checked'
        }
      },
      // 合计
      summaryMethod({ columns, data }){
        this.$emit('summaryMethod',columns, data)
      },
      // 合并行或列
      spanMethod({ row, column, rowIndex, columnIndex }){
        this.$emit('spanMethod', row, column, rowIndex, columnIndex)
      },
      // 单元格移入移出
      cellMouseEnter(row, column, cell, event){
        this.$emit('cellMouseEnter', row, column, cell, event)
      },
      cellMouseLeave(row, column, cell, event){
        this.$emit('cellMouseLeave', row, column, cell, event)
      },
      // 当某个单元格被点击时
      cellClick(row, column, cell, event){
        this.$emit('cellClick', row, column, cell, event)
      },
      // 当某个单元格被双击时
      cellDblclick(row, column, cell, event){
        this.$emit('cellDblclick', row, column, cell, event)
      },
      // 行点击
      rowClick(row, column, event){
        this.$emit('rowClick', row, column, event)
      },
      // 行双击
      rowDblclick(row, column, event){
        this.$emit('rowClick', row, column, event)
      },
      // 行被鼠标右键点击时
      rowContextmenu(row, column, event){
        this.$emit('rowContextmenu', row, column, event)
      },
      // 当某一列的表头被点击时
      headerClick(column, event){
        this.$emit('rowContextmenu', column, event)
      },
      // 当某一列的表头被鼠标右键点击时
      headerContextmenu(column, event){
        this.$emit('headerContextmenu', column, event)
      },

      // 翻页
      sizeChange(val) {
        this.$emit('sizeChange', val )
      },
      currentChange(val) {
        this.$emit('currentChange', val)
      },
      // 显示/隐藏列
      transferClose(data){
        if(data){
          this.showColumnsList = deepClone(data)
          // 重载表格
          this.isShowTable = false
          this.$nextTick(()=>{
            this.isShowTable = true
          })
        }
        this.columnVisible = false
      },
    }
  }
</script>

<style lang="scss">
  .table-menu-left{
    width: calc(100% - 35px);
    float: left;
  }
  .table-menu-right{
    width: 30px;
    float: right;
    .sort-btn{
      margin: 0 0 10px 0;
    }
  }
  .table-checkbox-group,
  .table-radio-group{
    width: 100%;
  }
  .el-table__row{
    td:first-child{
      padding: 0;
    }
  }
  /* 表头下拉筛选 */
  .header-filter-dropdown{
    &.el-dropdown{
      cursor: pointer;
      line-height: 17px;
      padding: 0;
      font-size: 12px;
      color: rgba(0,0,0,0.85);
    }
  }
  /* 复选框 */
  .table-checked{
    .el-radio__label,
    .el-checkbox__label{
      display: none;
    }
  }
  /* 序号+复选/单选框 */
  .index-check-box{
    &:hover{
      .table-checked {
        display: inline-block;
      }
      .table-index{
        display: none;
      }
    }
    .table-checked {
      display: none;
    }
    .table-index{
      display: inline-block;
    }
  }
  .table-row-checked{
    td{
      background-color: #eff5ff;
    }
  }

  /* 分页样式 */
  .pagination-box{
    text-align: right;
    margin-top: 10px;
    .el-pagination__jump{
      margin-left: 7px!important;
    }
    .el-pagination button,
    .el-pagination span:not([class*=suffix]){
      font-size: 12px;
    }
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li{
      margin: 0 3px;
    }
    .el-pagination__sizes .el-input{
      width: 85px!important;
    }
    .el-pagination__sizes{
      margin-right: 5px;
    }
    .el-pagination__sizes .el-input .el-input__inner{
      font-size: 12px;
      padding: 0 5px;
    }
  }
</style>
